<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <script src="../js/axios.min.js"></script>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      .boxBig {
        float: left;
        width: 800px;
      }
      .box {
        float: left;
        width: 370px;
      }
      .box2 {
        float: right;
        width: 400px;
        display: none;
      }
      .box input,
      .box2 input {
        margin: 10px 20px;
      }
      .box textarea,
      .box2 textarea {
        margin: 10px 20px;
      }
      .box button,
      .box2 button {
        margin: 15px 100px 0px 220px;
      }
      .box1 {
        float: right;
        width: 450px;
      }
      .box1 ul {
        height: 450px;
        overflow-y: scroll;
      }
      .box1 li {
        list-style: none;
        width: 200px;
        float: left;
      }
      .box1 img {
        width: 200px;
      }
      .box1 #btn {
        margin: 5px 10px 5px 120px;
      }
    </style>
  </head>
  <body>
    <div class="boxBig">
      <div class="box">
        <h1>好多多商城后台管理系统</h1>
        <label for="">商品名称</label><input type="text" /><br />
        <label for="">商品图片</label><input type="text" /><br />
        <label for="">商品价格</label><input type="text" /><br />
        <label for="">商品详情</label
        ><textarea name="" id="" cols="22" rows="5"></textarea><br />
        <button>发布</button>
      </div>
      <div class="box2">
        <h1>好多多商城后台管理系统</h1>
        <label for="">商品名称</label><input type="text" /><br />
        <label for="">商品图片</label><input type="text" /><br />
        <label for="">商品价格</label><input type="text" /><br />
        <label for="">商品详情</label
        ><textarea name="" id="" cols="22" rows="5"></textarea><br />
        <button>保存</button>
      </div>
    </div>

    <div class="box1">
      <ul id="list">
        <!-- <li>
                <h3></h3>
                <p></p>
                <img src="" alt="">
            </li> -->
      </ul>
    </div>

    <script>
      //添加商品接口
      // 接口地址：  http://jx.xuzhixiang.top/ap/api/goods/goods-add.php
      // 接口请求方式：get
      // 接口参数：
      //1.pname
      //2.pprice
      //3.pimg
      //4.pdesc
      //5.uid （可选）用户商品
      //使用方式  post 请求，参数在请求体

      //登录请求之后，把用户id存入本地，然后在首页就可以调用uid

      let ipts = document.querySelectorAll(".box input");
      let textareaLabel = document.querySelector("textarea");
      let btns = document.querySelector("button");
      let uid = localStorage.getItem("id");
      console.log(uid);
      btns.onclick = function () {
        console.log("dianjile");
        let pname = ipts[0].value;
        let pimg = ipts[1].value;
        let pprice = ipts[2].value;
        let pdesc = textareaLabel.value;
        let addListAPI = "http://jx.xuzhixiang.top/ap/api/goods/goods-add.php";
        axios
          .get(addListAPI, {
            params: {
              pname,
              pimg,
              pprice,
              pdesc,
              uid,
            },
          })
          .then((res) => {
            console.log(res.data);
            alert(res.data.msg);
            ipts[0].value = "";
            ipts[1].value = "";
            ipts[2].value = "";
            textareaLabel.value = "";
            shopList();
          });
      };

      // 商品列表接口

      // 所有商品接口
      // get
      // 参数
      // pagesize  每页获取几个数据
      // pagenum 获取第几页数据
      // uid  用户id
      // http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=20&pagenum=4

      //一开始就要开始调用，加载列表可以直接封装成函数，因为很多地方都需要重新加载商品列表
      shopList();
      let shopArr = [];
      function shopList() {
        let shopListAPI = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
        let pagesize = 20;
        let pagenum = 0;
        axios
          .get(shopListAPI, {
            params: {
              pagesize,
              pagenum,
              uid,
            },
          })
          .then(function (res) {
            console.log(res.data.data);
            //把得到的数据保存起来给全局变量这个数组
            shopArr = res.data.data;
            let liArr = res.data.data.map(
              (v) =>
                `<li>
                      <img src="${v.pimg}" alt="加载不出来了">
                      <h3>${v.pname}</h3>
                      <p>${v.pprice}</p>
                      <button onclick="alertShop(${v.pid})" id="btn">修改</button>
                      <button onclick="deleteShop(${v.pid})" id="btn1">删除</button>

                      </li>`
            );
            document.querySelector("#list").innerHTML = liArr.join(" ");
          });
      }
      shopList();
      function alertShop(pid) {
        // 修改商品 接口
        // 接口地址:http://jx.xuzhixiang.top/ap/api/goods/goods-update.php
        //      接口请求方式：get
        //      接口参数：
        // pid（必选）商品的id
        // pname（必选）商品
        // pprice（必选）商品
        // pdesc（必选）商品
        // 使用方式
        // http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php?pid=2459
        //      服务器返回json数据
        console.log(shopArr); //拿到了一个数组，你点击的那个商品的数组，里面是对象
        let obj = shopArr.find((v) => v.pid == pid);
        console.log(obj);
        let ipts1 = document.querySelectorAll(".box2 input");
        let textareaLabel1 = document.querySelector(".box2 textarea");
        let btns1 = document.querySelector(".box2 button");
        ipts1[0].value = obj.pname;
        ipts1[1].value = obj.pprice;
        ipts1[2].value = obj.pimg;
        textareaLabel1.value = obj.pdesc;
        btns1.onclick = function () {
          let alertAPI =
            "http://jx.xuzhixiang.top/ap/api/goods/goods-update.php";
          //需要把所有的那些参数，不管改没有改，回传给服务器
          let pname = ipts1[0].value;
          let pprice = ipts1[1].value;
          let pimg = ipts1[2].value;
          let pdesc = textareaLabel1.value;
          axios
            .get(alertAPI, {
              params: {
                pid,
                pname,
                pprice,
                pimg,
                pdesc,
              },
            })
            .then(function (res) {
              alert(res.data.msg);
              document.querySelector(".box2").style.display = "none";
              shopList();
            });
        };
        document.querySelector(".box2").style.display = "block";
      }
      let token = localStorage.getItem("token");
      let uid1 = localStorage.getItem("id");
      console.log(uid1);
      console.log(token);
      function deleteShop(pid) {
        //   删除商品 接口
        //   接口地址:http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php
        //   接口请求方式：get
        //   接口参数：
        //           pid（必选）商品的id
        //           uid（必选）用户的id
        //           token（必选）登陆时候返回的token
        //   使用方式:http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php?pid=2459
        //   服务器返回json数据
        console.log("dianjile");
        let deleteShopAPI =
          "http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php";
        //pid是在点击的时候有的，获取pid时
        axios
          .get(deleteShopAPI, {
            params: {
              uid: uid1,
              token,
              pid,
            },
          })
          .then(function (res) {
            alert(res.data.msg);
            shopList();
          });
      }
    </script>
  </body>
</html>
